/* dropdown menus */
.icon-white, .nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class*=" icon-"], .nav-list > .active > a > [class^="icon-"], .nav-list > .active > a > [class*=" icon-"], .navbar-inverse .nav > .active > a > [class^="icon-"], .navbar-inverse .nav > .active > a > [class*=" icon-"], .dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:focus > [class^="icon-"], .dropdown-menu > li > a:hover > [class*=" icon-"], .dropdown-menu > li > a:focus > [class*=" icon-"], .dropdown-menu > .active > a > [class^="icon-"], .dropdown-menu > .active > a > [class*=" icon-"], .dropdown-submenu:hover > a > [class^="icon-"], .dropdown-submenu:focus > a > [class^="icon-"], .dropdown-submenu:hover > a > [class*=" icon-"], .dropdown-submenu:focus > a > [class*=" icon-"] {
 background-image:none;
}

.dropdown-menu {
 border-radius:0 !important;
 box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
 li a {
	font-size:13px;
	padding-left:11px; padding-right:11px;
	margin-bottom:1px; margin-top:1px;
 }

 &.dropdown-icon-only {
	min-width:0;
	> li {
		float:left;
		margin:0 4px;
		> a {
			[class*="icon-"] {
				width:18px;
				font-size:16px;
				display:inline-block;
			}
			.icon-2x {
				width:36px;
				font-size:22px;
			}
		}// > a
	}// > li
 }//&.dropdown-icon-only

}//.dropdown-menu




//dropdown
.dropdown-color(@bgcolor:~"menu";@txtcolor:#FFFFFF) {
  @dropdown-class:~`"dropdown-@{bgcolor}"`;
  @dropdown-bg:~`"dropdown-@{bgcolor}"`;
  @dropdown-cl:@@dropdown-bg;


  .@{dropdown-class} {
	li a:hover,
	li a:focus,
	li a:active,
	li.active a,
	li.active a:hover,
	.dropdown-submenu:hover > a,

	.nav-tabs & li > a:focus
	{
		background:@dropdown-cl;
		color:@txtcolor;
	}
  }
}

.dropdown-color();
.dropdown-color(~"default");
.dropdown-color(~"info");
.dropdown-color(~"primary");
.dropdown-color(~"success");
.dropdown-color(~"warning");
.dropdown-color(~"danger");
.dropdown-color(~"inverse");
.dropdown-color(~"purple");
.dropdown-color(~"pink");
.dropdown-color(~"grey");
.dropdown-color(~"light" ; #333333);
.dropdown-color(~"lighter" ; #444444);
.dropdown-color(~"yellow" ; #444444);

.dropdown-light , .dropdown-lighter {
  .dropdown-submenu:hover > a:after {
	border-left-color:#444;
  }
}




/* closer to the toggle button */
.dropdown-menu {
 &.dropdown-close {
	top:92%; left:-5px;
	&.pull-right {
		left:auto;
		right:-5px;
	}
 }
 &.dropdown-closer {
	top:80%; left:-10px;
	&.pull-right {
		right:-10px;
		left:auto;
	}
 }
}


.dropdown-submenu > a:after {
 margin-right:-5px;
}



/* colorpicker dropdown */
.dropdown-colorpicker {
 > .dropdown-menu {
	top:80%;
	left:-7px;
	&.pull-right {
		right:-7px;
		left:auto;
	}
	
	padding:4px;
	min-width:120px; max-width:120px;
	
	 > li {
		display:block;
		float:left;
		width:20px; height:20px;
		margin:2px;
		 > .colorpick-btn {
			  display:block;
			  width:20px; height:20px;
			  
			  margin:0; padding:0;		  
			  border-radius:0;
			  position:relative;
			  
			  .transition(~"all ease 0.1s");
			  
			  &:hover {
				 text-decoration:none;
				 .opacity(80);
				 .scale(1.08);
			  }
			  &.selected:after {
				content:"\f00c";
				display:inline-block;
				font-family:FontAwesome;  font-size:11px;
				color:#FFF;
				
				position:absolute; left:0; right:0; text-align:center; line-height:20px;
			  }
		 }
		
	 }
 }
}

.btn-colorpicker {
	display:inline-block;
	width:20px; height:20px;
	background-color:#DDD;
	vertical-align:middle;
 
	border-radius:0;
}







/* top user info dropdowns */
.dropdown-navbar {
  padding:0;
  width:240px;
  box-shadow:0 2px 4px rgba(30, 30, 100, 0.25);
  
  > li {
	padding:0px 8px;
	background-color:#FFFFFF;
	
	&.nav-header {
		text-shadow:none;
		padding-top:7px; padding-bottom:7px;
		font-size:13px; font-weight:bold; text-transform:none;
		border-bottom:1px solid;
	}
	
	> [class*="icon-"] , > a > [class*="icon-"] {
		margin-right:5px !important;
		color:#555;
		font-size:14px;
	}
	
	
	
	> a {
		padding:10px 2px;
		margin:0;
		border-bottom:1px solid;
		font-size:12px;
		line-height:16px;
		color:#555;
		
		&:active, &:hover {
			background-color:transparent !important;
			color:#555;
		}
		.progress {
			margin-bottom:0;
			margin-top:4px;
		}
		.badge {
			line-height:16px;
			padding-right:4px; padding-left:4px;
			font-size:12px;
		}
	}
	&:last-child > a {
		border-bottom:0 solid #DDD;
		border-top:1px dotted transparent;
		color:#4F99C6;
 
		text-align:center;
		font-size:13px;
		
		&:hover {
			background-color:#FFF;
			color:#4F99C6;
			text-decoration:underline;
			> [class*="icon-"] {
				text-decoration:none;
			}
		}
		
	
	}
  }//end of li


  //navbar colors
  .navbar-colors(@border-color; @hover-color; @header-bg; @header-txt; @header-icon; @item-bottom) {
	border-color:@border-color;
	> li {
		&:hover {
			background-color:@hover-color !important;
		}
		&.nav-header {
			background-color:@header-bg !important;
			color:@header-txt;
			border-bottom-color:@border-color;

			> [class*="icon-"] {
				color:@header-icon;
			}
		}
		> a {
			border-bottom-color:@item-bottom;
		}
	}
  }

  .navbar-colors(#BCD4E5 ; #F4F9FC ; #ECF2F7 ; #8090A0 ; #8090A0; #E4ECF3);
  &.navbar-pink {
	.navbar-colors(#E5BCD4 ; #FCF4F9 ; #F7ECF2 ; #B471A0 ; #C06090 ; #F3E4EC);
  }
  &.navbar-grey {
	.navbar-colors(#E5E5E5 ; #F8F8F8 ; #F2F2F2 ; #3A87AD ; #3A87AD; #EEEEEE);
  }
  &.navbar-green {
	.navbar-colors(#B4D5AC ; #F4F9EF ; #EBF7E4 ; #88AA66 ; #90C060; #ECF3E4);
  }



  [class*="btn"][class*="icon-"] {
	display:inline-block;
	border:none;
	margin:0 5px 0 0;
	width:24px;
	text-align:center;
	padding-left:0;
	padding-right:0;
  }


  /* user info on top navbar icons */
 .msg-photo {
	 margin-right:6px;
	 max-width:42px;
 }
 .msg-body {
	display:inline-block;
	line-height:20px;
	white-space:normal;
	vertical-align:middle;

	max-width:175px;
 }
 .msg-title {
	display:inline-block;
	line-height:14px;
 }
 .msg-time {
	display:block;
	font-size:11px;
	color:#777;
	> [class*="icon-"] {
		font-size:14px;
		color:#555;
	}
 }

}


 #user_menu > li > a {
	padding:4px 12px;

	> [class*="icon-"] {
		margin-right:6px;
		font-size:120%;
	}
 }

 #user_info {
	max-width:100px;
	display:inline-block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;

	vertical-align:top;
	line-height:15px; 
	position:relative; top:6px;

	 small {
		display:block;
	 }
 }



